<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>聊天软件</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="animation.css">
    <link rel="stylesheet" href="chat.css">
</head>
<body>
    <div class="header">
        <h1>云聊</h1>
        <div class="search">
            <input type="text" placeholder="搜索好友或群组">
            <button class="btn btn-primary">搜索</button> 
        </div>
    </div>
    
    <div class="main">
        <div class="sidebar">
            <div class="panel friends-list">
                <div class="panel-heading">好友列表</div>
                <div class="panel-body">
                    <ul class="friend-groups">
                        <li>
                            <p>默认组</p>
                            <ul class="friend-list">
                                <li class="friend">
                                    <img src="avatar.png" alt="头像">   
                                    <p>李明 <span class="badge badge-success">在线</span></p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel groups-list">
                <div class="panel-heading">群列表</div>
                <div class="panel-body">
                    <ul class="group-list">
                        <li class="group">
                            <img src="group_avatar.png" alt="头像">
                            <p>高级前端群 <span class="badge badge-success">23</span></p>  
                        </li>
                        <li class="group">
                            <img src="group_avatar.png" alt="头像">
                            <p>UI设计群 <span class="badge badge-warning">10</span></p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel settings-list">
                <div class="panel-heading">设置</div>
                <div class="panel-body">
                    <ul class="settings-list">
                        <li><a href="#"><i class="fa fa-user"></i> 个人信息</a></li>
                        <li><a href="#"><i class="fa fa-picture-o"></i> 头像设置</a></li>
                        <li><a href="#"><i class="fa fa-lock"></i> 密码修改</a></li>
                        <li><a href="#"><i class="fa fa-paint-brush"></i> 主题色设置</a></li>
                        <li><a href="#">消息通知</a></li>
                        <li><a href="#">声音设置</a></li>
                        <li><a href="#">聊天背景</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </div>
            </div>  
        </div>
        
        <div class="chat">
            <div class="chat-header">
                <img src="avatar.png" alt="头像"> 
                <p>李明</p>
                <button class="close"><i class="fa fa-close"></i></button>
            </div>
            
            <div class="chat-body">
                <div class="message">
                    <p class="time">2019-10-21 15:20:56</p> 
                    <img src="avatar.png" alt="头像">
                    <p>你好,我是李明。</p>
                </div> 
                <div class="message message-right">
                    <img src="avatar.png" alt="我的头像">
                    <p>你好,我是王强。</p>
                </div>
            </div>   
            
            <div class="chat-footer">
                <input type="text" placeholder="输入消息">
                <button class="send btn btn-primary"><i class="fa fa-send"></i></button>  
            </div>        
        </div>
    </div>

    <script>
        const chatBody = document.querySelector('.chat-body');
        const chat = document.querySelector('.chat');

        chatBody.addEventListener('scroll', () => {
        if (chatBody.scrollTop + chatBody.clientHeight >= chatBody.scrollHeight) {
            chat.classList.add('scrollToBottom');
        } else {
            chat.classList.remove('scrollToBottom');
        }
        });

        function scrollToBottom() {
            chatBody.scrollTop = chatBody.scrollHeight; 
        }

        // 当有新消息时,调用scrollToBottom函数
        scrollToBottom();
    </script>

</body>
</html>
